<template>
  <div class="map">
    <!-- 初始化echarts -->
    <div ref="mapbox" class="center" align="center" style="height:600px;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/map/js/china.js' // import中国地图
import jsonp from 'jsonp'

// 使用地图需要先注册
const option = {
  title: {
    text: '国内疫情',
    subtext: '累计确诊病例数，包含治愈、死亡',
    x: 'center',
    textStyle: {
      // fontWeight: 'bolder',
      fontSize: 24,
      color: 'black'
    },
    subtextStyle: {
      fontSize: 18
    }
    // textAlign: 'left'
  },

  visualMap: [{
    type: 'piecewise',
    show: true,
    pieces: [
      // 图例
      { min: 10000 },
      { min: 1000, max: 9999 },
      { min: 100, max: 999 },
      { min: 20, max: 99 },
      { min: 1, max: 19 },
      { value: 0, color: '#909399' }
    ],
    // align: 'right',
    // orient: 'horizontal'
    // showLabel: false
    inRange: {
      symbol: 'circle',
      // symbolSize: ,
      color: ['#67c23a', 'skyblue']
    },
    itemWidth: 20,
    itemHeight: 10
  }],

  tooltip: {
    trigger: 'item' // 提示框
  },
  toolbox: {
    show: true,
    // orient: 'vertical',
    itemSize: 25,
    itemGap: 20,
    feature: {
      dataView: { readOnly: true },
      saveAsImage: {
        name: '国内疫情地图'
      }
    }
  },

  series: [{
    name: '确诊人数',
    type: 'map', // echats要渲染的是地图类型
    map: 'china', // 渲染中国地图
    label: {
      // 控制对应地区的汉字
      show: false,
      color: 'black', // 控制地区字体颜色
      fontSize: 12
    },
    itemStyle: {
      // 地图区域
      areaColor: 'sgray'
    },
    // roam: 'scale', //用户可根据滑轮缩放地图
    zoom: 1.25, // 放大或缩小地图
    emphasis: {
      // 控制高亮区域：鼠标位置
      label: {
        color: 'black',
        fontSize: 14
      },
      itemStyle: {
        areaColor: '#83b5e7'
      }
    },

    data: [
      // 展示后台数据
    ]
  }]
}

export default {
  name: 'ChinaMap',
  mounted() {
    this.get_Data()
    this.mychart = echarts.init(this.$refs.mapbox)
    this.mychart.setOption(option)
  },

  methods: {
    get_Data() { // 使用数据接口获取json数据包
      jsonp('https://gwpre.sina.cn/interface/fymap2020_data.json?_=1590550575291&callback=dataAPIData',
        {}, (err, data) => {
          if (!err) {
          // 代表请求数据成功
            console.log(data)
            const list = data.data.list.map(item => ({ name: item.name, value: item.value }))
            option.series[0].data = list
            this.mychart.setOption(option) // DOM已经渲染完成才能执行
          }
        })
    }

  //   get_World_Data(){ //此数据接口禁止跨域资源共享，无法获取数据
  //     jsonp('https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist',
  //     {}, (err, data) => {
  //       if(!err){
  //         //代表请求数据成功
  //         console.log(data);
  //         let list2 = data.data.map(item => ({name:item.name, value:item.confirm}));
  //         option.series[0].data = list2;
  //         this.mychart.setOption(option); //DOM已经渲染完成才能执行
  //       }
  //     })
  }
}
</script>

<style>
  #center{
    text-align: center;
    margin:0 auto;
    width: 100%;
  }
</style>
